<template>
	<view>
		<u-navbar :background="background" style="z-index: 9999;">
			<view class="ft_16 fw-b" v-if="orderDetail.refund_status==0">
				{{type==0?'待支付':type==6?'订单已取消':type==1?'待发货':type==5?'拼团中':type==2?'待收货':type==3?'已完成':'售后/退换'}}
			</view>
			<view class="ft_16 fw-b" v-else>
				售后/退换
			</view>
		</u-navbar>
		<view class="content">
			<!-- 订单状态 -->
			<view class="" style="padding: 10px 15px;line-height: 1.8em;" v-if="type!=4&&type!=5&&orderDetail.refund_status==0&&orderDetail.order_type_data!=5">
				<view class="ft_18 fw-b">
					{{type==0?'等待付款':type==6?'订单已取消':type==1?'等待发货':type==2?'等待收货':type==3?'已完成':'售后详情'}}
				</view>
				<view class="c-666" v-if="type==0">
					<u-count-down :timestamp="orderDetail.end_time" :show-days="false" separator-color="#333333" color="#333333" font-size="24"></u-count-down>
					<text>内未完成支付将自动取消订单</text>
				</view>
				<view class="c-666" v-else>
					
					{{type==6?'订单已取消,可选择再次下单':type==1?'订单已支付，请耐心等待商家发货':type==2?'7天之内未确认收货将自动确认收货':type==3?'订单已完成':'售后/退换'}}
				</view>
			</view>
			<!-- 拼单or售后 -->
			<view class="con_pindan card" v-if="type==4||type==5||orderDetail.refund_status!=0">
				<!-- 拼单订单 -->
				<view class="" v-if="type==5">
					<view class="ft_18 c-333 p_bottom_10">
						还差{{pindanInfo.number - pindanInfo.involved_num}}个名额
					</view>
					<view class="ft_16 c-red p_bottom_10">
						剩余
						<u-count-down :timestamp="pindanInfo.end_time" :show-days="false" separator-color="#FF0000" color="#FF0000" font-size="32"></u-count-down>
					</view>
					<view class="display just_space p_bottom_10 p_top_10">
						<view class="friend" v-for="(item,index) in pindanInfo.user_nifo" :key="index">
							<image :src="item.avatar"></image>
							<view class="ft_10 tuanzhang" v-if="index==0">
								团长
							</view>
						</view>
						<!-- #ifdef MP-WEIXIN -->
						<view class="friend1" v-for="(item,index1) of pindanInfo.num" :key="index1">
							<u-icon name="plus" color="#ffffff" size="28"></u-icon>
						</view>
						<!-- #endif -->
						<!-- #ifndef MP-WEIXIN -->
						<view class="friend1" v-for="(item,index1) of pindanInfo.num">
							<u-icon name="plus" color="#ffffff" size="28"></u-icon>
						</view>
						<!-- #endif -->
					</view>
					<view class="shareBtn">
						<!-- #ifdef MP-WEIXIN -->
						<button open-type="share" @onShareAppMessage="onShareAppMessage">
							邀请好友来拼团
						</button>
						<!-- #endif -->
						<!-- #ifndef MP-WEIXIN -->
						<button @click="weix_pop()">
							邀请好友来拼团
						</button>
						<!-- #endif -->
					</view>
				</view>
				<!-- 售后 -->
				<view class="" v-else>
					<u-steps :list="numList1" :current="2" active-color="#ec9220" mode="number" v-if="orderDetail.refund_status==3"></u-steps>
					<u-steps :list="numList" :current="orderDetail.refund_status" active-color="#ec9220" mode="number" v-else></u-steps>
				</view>
			</view>
			<!-- 虚拟商品待收货  v-if="orderDetail.order_type_data==5"-->
			<view class="" style="padding: 10px 15px;line-height: 1.8em;text-align: center;" v-if="orderDetail.order_type_data==5">
				<view class="c-666 p_bottom_10" style="text-align: left;">
					店长输入消费码或扫描二维码进行核销
				</view>
				<view class="fw-b">
					消费码
				</view>
				<view class="fw-b ft_16 p_bottom_10">
					{{orderDetail.consumption_code}}
				</view>
				<view class="display juzhong" style="">
					<!-- <image :src="erweima" style="width: 120px;height: 120px;"></image> -->
					<ayQrcode ref="qrcode" :modal="modal_qr" :url="url" @hideQrcode="hideQrcode" :height="120" :width="120" />
				</view>
			</view>
			
			<!-- 收货地址or收货人 -->
			<view class="con_1 card" v-if="orderDetail.refund_status==0">
				<!-- 地址或收货人 -->
				<view class="display just_space" v-if="orderDetail.order_type_data!=5">
					<view class=""> 
						<view class=" text_hidden1 ft_16 fw-b">
							{{addressInfo.address}}
						</view>
						<view class="p_top_10 c-999">
							<text class="p_right_10">{{addressInfo.name}}</text>
							<text>{{addressInfo.mobile}}</text>
						</view>
					</view>
					<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
				</view>
				<!-- 虚拟商品 -->
				<view class="" v-else>
					<view class="display just_space" style="border-bottom: 1px solid #eeeeee;padding-bottom: 15px;">
						<view class="">
							姓名
						</view>
						<view class="">
							{{xunishopinfo.name}}
						</view>
					</view>
					<view class="display just_space" style="padding-top: 15px;">
						<view class="">
							手机号码
						</view>
						<view class="">
							{{xunishopinfo.mobile}}
						</view>
					</view>
				</view>
			</view>
			<!-- 商品信息 -->
			<view class="card con_2">
				<view class="display shopinfo">
					<view class="shopimg">
						<image :src="orderDetail.image" mode="aspectFill"></image>
					</view>
					<view class="shoptext">
						<view class="">
							<view class="text_hidden2">{{orderDetail.goods_name}}</view>
							<view class="ft_12 c-999 p_top_10">
								{{orderDetail.goods_spec}} ×{{orderDetail.num}}
							</view>
						</view>
						<view class="ft_14 fw-b">
							<text class="ft_14" v-if="orderDetail.order_type_data==4">积分</text>
							<text class="ft_12" v-else>￥</text>
							<text class="ft_20">{{orderDetail.goods_money}}</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 订单信息 -->
			<view class="card con_3 ft_12">
				<view class="p_bottom_10">
					<text class="c-999">订单号：</text>
					<text>{{orderDetail.order_no}}</text>
				</view>
				<view class="p_bottom_10">
					<text class="c-999">下单时间：</text>
					<text>{{$all.formatTime(orderDetail.createtime*1000)}}</text>
				</view>
				<view class="p_bottom_10">
					<text class="c-999">订单状态：</text>
					<text>{{type==0?'待支付':type==6?'订单已取消':type==1?'待发货':type==5?'拼团中':type==2?'待收货':type==3?'已完成':'已退款'}}</text>
				</view>
				<view class="" v-if="type==2&&orderDetail.order_type_data!=5||type==3&&orderDetail.order_type_data!=5||type==4&&orderDetail.order_type_data!=5">
					<view class="p_bottom_10">
						<text class="c-999">快递服务：</text>
						<text>{{orderDetail.odd_name}}</text>
					</view>
					<view class="p_bottom_10">
						<text class="c-999">快递单号：</text>
						<text>{{orderDetail.odd_numbers}}</text>
					</view>
				</view>
				<view class="p_bottom_10" v-if="type==3||type==4">
					<text class="c-999">完成时间：</text>
					<text>{{$all.formatTime(orderDetail.sign_time*1000)}}</text>
				</view>
			</view>
			<!-- 售后信息 -->
			<view class="card con_3 ft_12"  v-if="orderDetail.refund_status!=0">
				<view class="p_bottom_10">
					<text class="c-999">申请类型：</text>
					<text>{{shouhInfo.refund_type}}</text>
				</view>
				<view class="p_bottom_10">
					<text class="c-999">收货状态：</text>
					<text>{{shouhInfo.delivery_status==1||shouhInfo.delivery_status==2?"未收货":shouhInfo.delivery_status==3?'已收货':'已退款'}}</text>
				</view>
				<view class="p_bottom_10 display" style="align-items: flex-start;">
					<view class="c-999">退换原因：</view>
					<view>
						<view class="p_bottom_10">
							{{shouhInfo.refund_reason}}
						</view>
						<image :src="item" v-for="(item,index) in shouhInfo.reason_image" :key="index" style="width: 60px;height: 60px;border-radius: 5px;margin: 0 10px 10px 0;" ></image>
					</view>
				</view>
			</view>
			
			<!-- 底部操作按钮 -->
			<view style="height: 100rpx;"></view>
			<view class="bottom_bar display" v-if="orderDetail.refund_status!=1&&type!=4&&orderDetail.order_type_data!=5">
				<view class="ft_12 useOf1" v-if="type==2||type==3||type==7" @click="go_wuliu()">
					查看物流
				</view>
				<view class="ft_12 useOf1" @click="leftBtn(type)" v-if="type!=5">
					{{type==0||type==1?'取消订单':type==6?'再次下单':type==2?'再下一单':type==3?'申请售后':''}}
				</view>
				<view class="ft_12 useOf1" v-if="type==3" @click="rightBtn(type)">
					删除订单
				</view>
				<!-- <view class="ft_12 useOf1" v-if="type==2" @click="see_wuliu(type)">
					查看物流
				</view> -->
				<!-- <navigator target="miniProgram" v-if="type==2" open-type="navigate" app-id="wx6885acbedba59c14" path="pages/result/result?nu=''&com=''&querysource=third_xcx" extra-data="" version="release">查看物流</navigator> -->
				<view class="ft_12 useOf1" v-if="type==3" @click="go_pingjia()">
					{{orderDetail.is_eval==0?"去评价":"已评价"}}
				</view>
				
				<view class="ft_12 useOf" v-if="type==0||type==2||type==5&&orderDetail.pay_status==0" @click="rightBtn(type)">
					{{type==0||type==5?'去支付':type==2?'确认收货':''}}
				</view>
			</view>
			<view class="bottom_bar display" v-if="orderDetail.refund_status==1">
				<view class="ft_12 useOf1" @click="leftBtn(type)">
					取消申请
				</view>
			</view>
			
		</view>

		<!-- 取消订单弹窗 -->
		<u-modal v-model="show" :show-cancel-button="true" confirm-color="#ff7f1e" @confirm="cancelOrder">
			<view class="" style="padding: 20px 0;text-align: center;">
				确认取消订单?
			</view>
		</u-modal>
		<!-- 确认收货弹窗 -->
		<u-modal v-model="show1" :show-cancel-button="true" confirm-color="#ff7f1e" @confirm="confirmSH">
			<view class="" style="padding: 20px 0;text-align: center;">
				是否确认收货?
			</view>
		</u-modal>
		<!-- 删除订单弹窗 -->
		<u-modal v-model="show2" :show-cancel-button="true" confirm-color="#ff7f1e" @confirm="deleteOrder">
			<view class="" style="padding: 20px 0;text-align: center;">
				是否删除订单?
			</view>
		</u-modal>
		<!-- 取消退款申请弹窗 -->
		<u-modal v-model="show3" :show-cancel-button="true" confirm-color="#ff7f1e" @confirm="cancelSQ">
			<view class="" style="padding: 20px 0;text-align: center;">
				是否取消退款申请?
			</view>
		</u-modal>
		
		
	</view>
</template>

<script>
	import ayQrcode from "@/components/ay-qrcode/ay-qrcode.vue"
	export default {
		data() {
			return {
				type:0, //订单状态
				orderid:28, //订单id
				background:{backgroundColor: '#ffffff',},
				xunishopinfo:{}, //虚拟商品信息
				//二维码相关参数
				modal_qr: false,
				url: '5555', // 要生成的二维码值
				erweima:"",//核销二维码
				
				numList: [ //成功售后步骤
					{
						name: '提交售后'
					}, {
						name: '审核中'
					}, {
						name: '退换完成'
					}, 
				],
				numList1: [ //失败售后步骤
					{
						name: '提交售后'
					}, {
						name: '审核中'
					}, {
						name: '退换失败'
					}, 
				],
				pindanInfo:{}, //拼单信息
				addressInfo:{}, //收货地址
				orderDetail:{}, //订单信息
				shouhInfo:{}, //售后信息
				
				show:false, //取消订单弹窗
				show1:false, //确认收货弹窗
				show2:false, //删除订单弹窗
				show3:false, //取消退款申请弹窗
				
			}
		},
		components: {
			ayQrcode,
		},
		onLoad(e) {
			
			if(e.type){ 
				this.type=Number(e.type) 
				this.orderid=e.orderid
			}
			console.log(e);
			this.getorderDetail() //获取订单信息
			// this.erweima
			// let that = this;
		},
		methods: {
			// 展示二维码
			showQrcode() {
				let _this = this;
				_this.modal_qr = true;
				uni.showLoading()
				setTimeout(function() {
					uni.hideLoading()
					_this.$refs.qrcode.crtQrCode()
				}, 500)
			},
			
			//传入组件的方法
			hideQrcode() {
				console.log(1);
				this.modal_qr = false;
			},
			getorderDetail(){ //获取订单信息
				this.$myRequest('order/orderDetail',{
					id:this.orderid
				}).then(res=>{
					let data=res.data.data
					console.log(data);
					if(data.info){
						this.orderDetail=data.info
						this.orderDetail.goods_spec=this.orderDetail.goods_spec.replace(/;/g,' ')
						let newtime= Date.parse(new Date());
						this.orderDetail.end_time=this.orderDetail.end_time - newtime/1000 //倒计时
						if(this.orderDetail.consumption_code){ //虚拟商品核销
							this.url=this.orderDetail.consumption_code //核销码
							that.showQrcode() //展示二维码
						}
					}
					if(data.order_group){
						this.pindanInfo=data.order_group //拼团信息
						let newtime= Date.parse(new Date());
						this.pindanInfo.end_time=this.pindanInfo.end_time - newtime/1000 //倒计时
						this.pindanInfo.num=Math.round((this.pindanInfo.number-this.pindanInfo.involved_num)*100)/100 
					}
					if(this.orderDetail.refund_status!=0){ //退款订单
						this.getshouhou() //获取售后信息
					}
					if(data.address){ //收货地址 、收货人
						let address=data.address
						address.address=address.province_name+address.city_name+address.district_name+address.address
						if(this.orderDetail.order_type_data==5){ //虚拟商品
							this.xunishopinfo=address
						}else{ //实物
							this.addressInfo=address
						}
					}
					
				})
			},
			getshouhou(){ //获取售后信息
				this.$myRequest('order/refundDetail',{
					id:this.orderid
				}).then(res=>{
					let data=res.data.data
					console.log(data);
					this.shouhInfo=data.info
				})
			},
			
			go_wuliu(){ //查看物流
				uni.navigateTo({
					url:"../../../seeWuliu?orderid="+this.orderid
				})
			},
			leftBtn(e){ //底部左边按钮
				console.log(e);
				switch (e) {
					case 0: case 1: //取消订单
						this.show=true
						// if(e==0){
						// 	this.show=true
						// }else{
						// 	this.$all.toast("收货之后才可协商退款")
						// }
					break;
					case 2: case 6: //再次下单
						this.againPlace()
					break;
					case 3:
						if(this.orderDetail.refund_status==0){
							this.applySH()  //申请售后
						}else if(this.orderDetail.refund_status==1){
							this.show3=true
						}
					break;
				}
			},
			rightBtn(e){ //底部右边按钮
				console.log(e);
				switch (e){
					case 0:case 5: //去支付
						this.lijiPay(this.orderDetail.pay_order_no.order_no) //支付订单编号
					break;
					case 2: //确认收货
						this.show1=true
					break;
					case 3: //删除订单
						this.show2=true
					break;
				}
			},
			go_pingjia(){ //去评价
				if(this.orderDetail.is_eval==0){ //未评价
					uni.navigateTo({
						url:"../../../pingjia?id="+this.orderDetail.id
					})
				}
			},
			see_wuliu(){ //查看物流
				
			},
			
			cancelOrder(){ //取消订单
				// console.log(this.orderDetail.delivery_status);
				this.show=false
				this.$myRequest('order/clearOrder',{
					order_id:this.orderid
				}).then(res=>{
					let data=res.data
					console.log(data);
					this.$all.toast(res.data.msg)
					if(res.data.code==1){
						setTimeout(()=>{
							uni.$emit('orderList')
							uni.navigateBack()
						},800)
					}
					
				})
			},
			againPlace(){ // 再次下单or再下一单
				console.log(this.orderDetail.goods_id);
				let shopid=this.orderDetail.goods_id
				uni.navigateTo({
					url:"../../../../pages/shop/shopDetail?shopid="+shopid
				})
			},
			applySH(){ //申请售后
				console.log("申请售后");
				uni.navigateTo({
					url:"applySH?orderid="+this.orderid
				})
			},
			cancelSQ(){ //取消退款申请
				this.$myRequest('order/clearRefund',{
					order_id:this.orderid
				}).then(res=>{
					console.log(res.data);
					this.$all.toast(res.data.msg)
					if(res.data.code==1){
						setTimeout(()=>{
							uni.$emit('orderList')
							uni.navigateBack()
						},800)
					}
				})
			},
			deleteOrder(){ //删除订单
				this.$myRequest('order/orderDel',{
					order_id:this.orderid
				}).then(res=>{
					console.log(res.data);
					this.$all.toast(res.data.msg)
					if(res.data.code==1){
						setTimeout(()=>{
							uni.$emit('orderList')
							uni.navigateBack()
						},800)
					}
				})
			},
			lijiPay(order_no){ //立即支付
				console.log(order_no,'12312312');
				let type=''
				// #ifndef MP-WEIXIN
				type=2
				// #endif
				this.$myRequest('order/pay',{
					order_no:order_no,type:type
				}).then(res=>{
					console.log(res.data,'asdsada');
					if(res.data.code==1){
						let data=res.data.data.info
						wx.requestPayment({
							appId: data.appId,
							timeStamp:data.timeStamp,
							nonceStr: data.nonceStr,
							package: data.package,
							signType: data.signType,
							paySign: data.paySign,
							success(res) {
								wx.showToast({
									title:'支付成功！',
									icon:'success'
								})
								if(res.err_msg == "get_brand_wcpay_request:ok"){
									// this.$all.toast("支付成功")
									setTimeout(()=>{
										uni.$emit('orderList')
										uni.navigateBack()
									},800)
								}
							},
							fail(res) { 
								wx.showToast({
									title:'支付失败！',
									icon:'none'
								})
							}
						})
					}else{
						this.$all.toast("拉起支付失败")
					}
					
				})
			},
			confirmSH(){ //确认收货
				this.show1=false
				this.$myRequest('order/receiving',{
					order_id:this.orderid
				}).then(res=>{
					let data=res.data
					console.log(data);
					this.$all.toast(res.data.msg)
					if(res.data.code==1){
						setTimeout(()=>{
							uni.$emit('orderList')
							uni.navigateBack()
						},800)
					}
					
				})
			},
			
			onShareAppMessage(res) { //监听分享
				console.log("用户点击了按钮开始分享", res)
				// this.show3=false
				console.log(this.pindanInfo.id,'1111');
				if (res.from === 'button') {// 来自页面内分享按钮
					console.log(res.target,2222)
					return {
						title: this.orderDetail.goods_name,
						path: `../../index/pindan/pindanDetail?shopid=${this.orderDetail.goods_id}&pid=${this.$all.getData('user').id}&pintID=${this.pindanInfo.id}`,
						success(res){ //微信取消了分享返回
							console.log(res)
							uni.showToast({title: '分享成功'})
						},
						fail(err){
							console.log(err)
							uni.showToast({title: '分享失败',icon:"none"})
						}
					}
				}
			},
			// onShareTimeline(res) { //转发到朋友圈传递的数据
			// 	return {
			// 		title: this.shopInfo.name,
			// 		query: `shopid=${this.orderDetail.goods_id}&pid=${this.$all.getData('user').id}`,
			// 		imageUrl: '',
			// 	}
			// },
			weix_pop(){ //分享到微信 app
				let user=this.$all.getData('user')
				uni.share({
					provider: 'weixin',
					scene: "WXSceneSession",
					type: 5,
					imageUrl: this.orderDetail.image,
					title: this.orderDetail.goods_name,
					miniProgram: {
							id: 'gh_2041a37d9177',
							path: `/mine/pages/index/pindan/pindanDetail?shopid=${this.orderDetail.goods_id}&pid=${this.$all.getData('user').id}&pintID=${this.pindanInfo.id}`,
							type: getApp().globalData.sharetype,
							webUrl: 'http://uniapp.dcloud.io'
					},
					success: ret => {
							console.log(JSON.stringify(ret));
					},
					fail:err =>{
						this.$all.toast("分享失败")
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
			
		}
	}
</script>

<style lang="scss">
page{
	background-color: #fafafa;
}

.content{
	.card{
		padding: 15px 15px 0;
		background-color: #FFFFFF;
		margin-bottom: 10px;
	}
	.con_pindan{
		text-align: center;
		padding-bottom: 15px;
		.friend{
			position: relative;
			image{
				width: 50px;height: 50px;border-radius: 50%;
			}
			.tuanzhang{
				position: absolute;top: -5px;right:-5px;z-index: 99;color: #FFFFFF;background-color: #000000;border-radius: 30px;padding: 0 3px;
			}
		}
		.friend1{
			width: 50px;height: 50px;border-radius: 50%;text-align: center;line-height: 50px;background-color: #F1F1F1;
		}
		.shareBtn{ //邀请好友拼团按钮
			text-align: center;padding: 10px 70px ;
			button{
				background: linear-gradient(90deg, #F1A421 0%, #E4741F 100%);
				border-radius: 30px;
				padding: 15px 0;
				line-height:1.1em;
				font-size: 14px;
				color: #FFFFFF;
			}
			button:after{
				border:none;
			}
		}
	}
	
	.con_1{
		padding-bottom: 15px;
	}
	.con_2{
		.shopinfo{
			padding-bottom: 15px;
			.shopimg{
				width: 200rpx;height: 200rpx;margin-right: 10px;
				image{
					width: 200rpx;height: 200rpx;border-radius: 5px;
				}
			}
			.shoptext{
				display: flex;justify-content: space-between;flex-flow: column;height: 100px;
			}
		}

		
	}
	.con_3{
		
	}
	
	.bottom_bar{
		height: 100rpx;width: 100%;background-color: #FFFFFF;position: fixed;bottom: 0;
		justify-content: flex-end;
		padding: 0 15px;
		.useOf{
			padding: 8px 0;background: linear-gradient(90deg, #F1A421 0%, #E4741F 100%);color: #FFFFFF;border-radius: 30px;
			width: 80px;
			text-align: center;
			margin-left: 10px;
		}
		.useOf1{
			border: 1px solid #333333;
			padding: 7px 0;border-radius: 30px;
			width: 78px;
			text-align: center;
			margin-left: 10px;
		}
	}
	
}

</style>
